<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'date-pipe'">
    <div class="devui-demo-title">{{ 'components.common.pipeDemo.dDatePipe.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="common-basic-usage" [sourceData]="datePipeSource">
      <d-date-pipe demo></d-date-pipe>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'safe-null-pipe'">
    <div class="devui-demo-title">{{ 'components.common.pipeDemo.dSafeNullPipe.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.common.pipeDemo.dSafeNullPipe.description' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="common-basic-usage" [sourceData]="safeNullPipeSource">
      <d-safe-null-pipe demo></d-safe-null-pipe>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'browser-version'">
    <div class="devui-demo-title">{{ 'components.common.browserDemo.title' | translate }}</div>

    <d-codebox id="common-helper-browser" [sourceData]="helperBrowserSource">
      <d-common-helper-browser demo></d-common-helper-browser>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'open-url'">
    <div class="devui-demo-title">{{ 'components.common.openURLDemo.title' | translate }}</div>

    <d-codebox id="common-helper-jump" [sourceData]="helperJumpSource">
      <d-common-helper-jump demo></d-common-helper-jump>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'download-file'">
    <div class="devui-demo-title">{{ 'components.common.helperDownloadDemo.title' | translate }}</div>

    <d-codebox id="common-helper-download" [sourceData]="helperDownloadSource">
      <d-common-helper-download demo></d-common-helper-download>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'iframe-propagate'">
    <div class="devui-demo-title">{{ 'components.common.iframePropagateDemo.title' | translate }}</div>

    <div class="devui-demo-text">{{ 'components.common.iframePropagateDemo.description' | translate }}</div>
    <d-codebox id="common-iframe-propagate" [sourceData]="iframePropagateSource">
      <d-common-iframe-propagate demo></d-common-iframe-propagate>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'clipboard'">
    <div class="devui-demo-title">{{ 'components.common.clipboardDemo.title' | translate }}</div>

    <div class="devui-demo-text"></div>
    <d-codebox id="common-clipboard" [sourceData]="clipboardSource">
      <d-common-clipboard demo></d-common-clipboard>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'shapeIconHoverable'">
    <div class="devui-demo-title">{{ 'components.common.shapeIconHoverableDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="common-shapeIconHoverable" [sourceData]="shapeIconHoverableSource">
      <d-shape-icon-hover demo></d-shape-icon-hover>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'lazy-load'">
    <div class="devui-demo-title">{{ 'components.common.lazyLoadDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.common.lazyLoadDemo.description' | translate }}</div>
    <d-codebox id="common-lazy-load" [sourceData]="lazyLoadSource">
      <d-lazy-load demo></d-lazy-load>
    </d-codebox>
  </div>
</div>
